<%--
  Created by IntelliJ IDEA.
  User: yinshankun
  Date: 2020/11/12
  Time: 12:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath();%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript" src="<%=path%>/ysk/js/jquery-3.5.1.min.js"></script>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>查询服务范围</title>
    <style type="text/css">
        #add1{
            width: 400px;
            border: 1px solid black;
            height: 130px;
           margin: 0 auto;
          margin-top: 100px;
            text-align: center;
            background-image: url("<%=path%>/ysk/images/bgx.jpg");
        }
        .add2{
            width: 100px;
            height: 20px;
        }
        #add3{
            margin-bottom: 30px;
            margin-top: 30px;
        }

    </style>
</head>
<body>
<div id="add1">
    <div id="add3">请选择您的居住区域,查询不到请<a href="javascript:void(0)">反馈</a></div>

        <select class="add2" id="district" >

            <c:forEach items="${requestScope.districts}" var="dis">
                <option  value=${dis.id} >${dis.districtName}</option>
            </c:forEach>
        </select >

        <select class="add2" id="town">


        </select>

        <select class="add2" id="community">

        </select>



    </select>
</div>
</body>
</html>
<!--  乡镇列表 -->
<script  type="text/javascript">

    $(function () {
        $("#district").change(function () {
            $("#town").html("");
            $("#community").html("");
            var num=$("#district").val()


            $.ajax({
                url:"<%=path%>/districtnum",
                type:"post",
                data:{num,num},
                async:false,
                success:function (mes) {

                    $("#town").html("");


                    for(var i=0;i<mes.length;i++)
                    {
                        var opt = $("<option></option>");
                        opt.html(mes[i].townName);
                        opt.val(mes[i].id);
                        $("#town").append(opt);
                    }


                }
            })
        })
    })


</script>

<!--  村列表 -->
<script  type="text/javascript">

    $(function () {
        $("#town").change(function () {
            $("#community").html("");
            var num=$("#town").val()


            $.ajax({
                url:"<%=path%>/communitynum",
                type:"post",
                data:{num:num},
                async:false,
                success:function (mes) {



                    for(var i=0;i<mes.length;i++)
                    {
                        var opt = $("<option></option>");
                        opt.html(mes[i].communityName);
                        opt.val(mes[i].id);
                        $("#community").append(opt);
                    }


                }
            })
        })
    })


</script>